<template>
    <div class="container">
        <div class="paramsManageMain">
            <el-form
                :inline="true"
                class="demo-form-inline"
                size="small"
                ref="formDate"
                :model="formDate"
            >
                <el-row>
                    <el-form-item label="姓名:">
                        <el-input placeholder="请输入用户姓名" v-model.trim="formDate.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话:">
                        <el-input placeholder="请输入用户电话" v-model="formDate.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="卡号:">
                        <el-input placeholder="请输入用户卡号" v-model.trim="formDate.cardno"></el-input>
                    </el-form-item>
                    <el-form-item label="客户类型:">
                        <!-- <el-input placeholder="请输入用户姓名" v-model="formDate.sign"></el-input> -->
                        <el-select v-model="formDate.sign">
                            <el-option label="全部" value></el-option>
                            <el-option
                                :label="item.label"
                                v-for="item in vipsignData"
                                :value="item.code"
                                :key="item.code   "
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="handelInfoSearch"
                    >查询</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-refresh-right"
                        @click="handelReset"
                    >重置</el-button>
                    <el-button type="primary" size="small" @click="handelInfoImport">导入</el-button>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="24">
                    <template>
                        <el-table
                            :data="clientContact"
                            border
                            style="width:100%;"
                            stripe
                            class="heard-bg"
                        >
                            <el-table-column label="卡号">
                                <template slot-scope="scope">
                                    <span class="text_a">{{scope.row.cardno}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="客户姓名"></el-table-column>
                            <el-table-column prop="gender" label="性别">
                                <template slot-scope="scope">{{scope.row.gender|genderFilter}}</template>
                            </el-table-column>
                            <el-table-column prop="idno" label="证件号码"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"></el-table-column>
                            <el-table-column label="客户类型">
                                <template slot-scope="scope">
                                    <span>{{scope.row.sign|signFilter(vipsignData)}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="pagination">
                            <Pagination
                                :hanleChangeCurrentPage="hanleChangeCurrentPage"
                                :handleChangeSize="handleChangeSize"
                                :currentPage="currentPageDetail"
                                :pageSize="pageSizeDetail"
                                :total="totalDetail"
                            />
                        </div>
                    </template>
                </el-col>
            </el-row>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="ShowImport"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">客户名单导入</div>
            <input type="file" ref="input" id="fileupload" @input="upload" />
            <!-- <a @click="downloadFile" class="downloadClass">点击此处下载模板</a> -->
            <el-button type="text" @click="downloadFile">点击下载客户名单表模板</el-button>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleImport"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import request from '@/apis/request';
import { getDictValue, getDictSelectList } from '@/utils/Common';

export default {
    name: 'ClientList',
    data() {
        return {
            formDate: {
                name: '',
                phone: null,
                cardno: '',
                sign: '',
            },
            ShowImport: false,
            clientContact: [],
            vipsignData: [],
            // 分页需要的数据
            pageSizeDetail: 10,
            currentPageDetail: 1, // 当前页数
            totalDetail: 0, // 总页面
        };
    },
    filters: {
        signFilter: (value, valuetype) => {
            value = (`${value}`).trim();
            for (let index = 0; index < valuetype.length; index++) {
                const element = valuetype[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        genderFilter: (value) => {
            if (value === 'F') {
                return '女';
            }
            return '男';
        },
    },
    components: {
        Pagination,
    },
    mounted() {
        this.getDictValue();
    },
    methods: {
        // 点击查询
        handelInfoSearch() {
            const params = JSON.parse(JSON.stringify(this.formDate));
            params.pageSize = this.pageSizeDetail;
            params.pageNum = this.currentPageDetail;
            this.$post.blackAndWhiteMangage.findCustomer(params).then((res) => {
                // console.log(res,'res_1111111111');
                if (res.data.success) { // 接口请求成功
                    const result = JSON.parse(JSON.stringify(res.data.content));
                    this.clientContact = result.records;
                    this.totalDetail = result.total;
                }
            });
        },
        // 点击导入按钮
        handelInfoImport() {
            this.ShowImport = true;
        },
        // 下载模板
        upload() {
            this.files = this.$refs.input.files[0];
        },
        // 重置
        handelReset() {
            this.formDate = {
                name: '',
                phone: null,
                cardno: '',
                sign: '',
            };
        },
        async getDictValue() {
            this.vipsignData = await getDictSelectList('vipsign', this);
        },
        // 取消
        cancelClick() {
            this.ShowImport = false;
        },
        // 点击此处下载模板
        downloadFile() {
            const url = '/iccsrv/customerList/customerExport';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                // params: 'customerListTemplate.xlsx',
            }).then((res) => {
                // console.log(res, '相应报文')
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = 'customerListTemplate.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 导入点击确定按钮
        handleImport() {
            if (!this.files.name) {
                this.$message.warning('请选择需要导入的文件！');
                return;
            }
            const arr = ['xls', 'xlsx', 'csv', 'xltx', 'xml'];
            if (arr.indexOf(this.files.name.split('.')[1]) > -1) {
                const data = new FormData();
                data.append('file', this.files);
                this.$post.blackAndWhiteMangage.customerImport(data)
                    .then((res) => {
                        if (res.data.success) {
                            this.$message.success('导入成功！');
                            const obj = document.getElementById('fileupload');
                            obj.value = '';
                            // this.getInitData(this.formData);
                            this.ShowImport = false;
                            this.handelInfoSearch();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            } else {
                this.$message.warning('只能导入excel文件！');
            }
        },
        // 分页方法
        hanleChangeCurrentPage(val) {
            this.currentPageDetail = val;
            this.handelInfoSearch();
        },
        // 改变每页展示的数据个数
        handleChangeSize(val) {
            this.pageSizeDetail = val;
            this.handelInfoSearch();
        },
        //

    },
};
</script>

<style lang='scss' scoped>
.container {
    width: 100%;
    height: 100%;
    .paramsManageMain {
        width: 100%;
        background: #fff;
        margin: 0 0 15px;
        // border-radius:5px;
        /* padding: 20px; */
        box-sizing: border-box;
        text-align: left;
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
.downloadClass {
    margin-left: 18%;
    color: #409eff;
}
</style>
